<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <style>
    	.a{
    		width:12%;height:80px;background-color:dodgerblue;
    	}
    </style>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script src="js/jquery-2.2.1.js"></script>
    <script type="text/javascript" charset="UTF-8">
     $.get("http://localhost:8080/select",null,
				function(data){
					var c=data.length;
      	var cols=8;    
        var rows=12; 
        var a=[
        	['0','<tr><td style="width:12%;height:80px;background: deepskyblue;">1</td>',' ',' ',' ',' ',' ',' ','</tr>'],
        	['1','<tr><td style="width:12%;height:80px;background: deepskyblue;">1</td>',' ',' ',' ',' ',' ',' ','</tr>'],
        	['2','<tr><td style="width:12%;height:80px;background: deepskyblue;">2</td>',' ',' ',' ',' ',' ',' ','</tr>'],
        	['3','<tr><td style="width:12%;height:80px;background: deepskyblue;">3</td>',' ',' ',' ',' ',' ',' ','</tr>'],
        	['4','<tr><td style="width:12%;height:80px;background: deepskyblue;">4</td>',' ',' ',' ',' ',' ',' ','</tr>'],
        	['5','<tr><td style="width:12%;height:80px;background: deepskyblue;">5</td>',' ',' ',' ',' ',' ',' ','</tr>'],
        	['6','<tr><td style="width:12%;height:80px;background: deepskyblue;">6</td>',' ',' ',' ',' ',' ',' ','</tr>'],
        	['7','<tr><td style="width:12%;height:80px;background: deepskyblue;">7</td>',' ',' ',' ',' ',' ',' ','</tr>'],
        	['8','<tr><td style="width:12%;height:80px;background: deepskyblue;">8</td>',' ',' ',' ',' ',' ',' ','</tr>'],
        	['9','<tr><td style="width:12%;height:80px;background: deepskyblue;">9</td>',' ',' ',' ',' ',' ',' ','</tr>'],
        	['10','<tr><td style="width:12%;height:80px;background: deepskyblue;">10</td>',' ',' ',' ',' ',' ',' ','</tr>'],
        	['11','<tr><td style="width:12%;height:80px;background: deepskyblue;">11</td>',' ',' ',' ',' ',' ',' ','</tr>'],
        	['12','<tr><td style="width:12%;height:80px;background: deepskyblue;">12</td>',' ',' ',' ',' ',' ',' ','</tr>']
        ]; 
        var htmlstr="<table border='1'style='text-align: center;width: 100%;'>";
        htmlstr+="<tr>";
        htmlstr+="<td class='a'> </td>"
        htmlstr+="<td class='a'>周一</td><td class='a'>周二</td><td class='a'>周三</td><td class='a'>周四</td><td class='a'>周五</td><td class='a'>周六</td><td class='a'>周日</td>";
        htmlstr+="</tr>";
                for(var x=2;x<=cols;x++){
        	for(var y=1;y<=rows;y++){
        		a[y][x]="<td style='width:12%;height:80px;'><a href='four.html'>+</a></td>";
        	}
        }
        for(var z=c;z>=1;z--){
        for(var x=1;x<=cols;x++){
        	for(var y=1;y<=rows;y++){
        		//课程循环
        		if(x==data[c-z].week){
        			
        			if(y==data[c-z].time){
        				a[y][x]="<td rowspan='2' style='width:12%;height:80px;background: blue;color:dodgerblue;'><a style='color:deepskyblue'>" + data[c-z].name+"</a><br /><a style='color:yellow'>"+data[c-z].addr+"</a></td>";
        				
        			}
        			else if(y==data[c-z].endtime){
        				a[y][x]="";
        			}
        		}
        		
        	}
        }
        }
        var tr = new Array();
        for(var x=1;x<=12;x++){
        	tr[x]="";
        	for(var y=1;y<=8;y++){
        		tr[x]+=a[x][y];
        	}	
        }
        // debug with unefined
        for(var y=1;y<=12;y++){
        	htmlstr+=tr[y];
        }
        htmlstr+="</table>"
        document.getElementById("ha").innerHTML=htmlstr;
				});
			

    </script>
</head>
<body>
	<div id="ha">
</div>

<div style="height: 50px; color: #8A6DE9;">
	&nbsp;
</div>
</body>
</html>